import React, { useEffect, useMemo, useState } from "react";
import { InfiniteScroll } from "antd-mobile";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { sleep } from "antd-mobile/es/utils/sleep";

export default function List(props) {
  const [hasMore, setHasMore] = useState(true);
  const type = props.type;
  const [isVisible, setIsVisible] = useState(false);
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const navigate = useNavigate();

  // 显示/隐藏按钮的逻辑
  const toggleVisibility = () => {
    if (window.pageYOffset > 300) {
      // 当滚动超过300px时显示按钮
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };
  const newData = useMemo(() => {
    if (type === "all") {
      return data;
    } else if (type === "sales") {
      let copyData = [...data];
      return copyData.sort((a, b) => b.sales - a.sales);
    } else {
      return data;
    }
  }, [data, type]);

  async function loadMore() {
    await sleep(2000);
    const append = await getData();
    setData((val) => [...val, ...append]);
    setHasMore(append.length > 0);
    setPage((val) => val + 1);
  }

  // 平滑滚动到顶部
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };
  // 页面加载完后立即执行一次
  // useEffect(() => {
  //   loadMore()
  //   console.log(props.type);
  //   window.addEventListener("scroll", toggleVisibility);
  //   return () => {
  //     window.removeEventListener("scroll", toggleVisibility);
  //   };
  // }, []);
  const getData = async () => {
    let list = await axios.get(`/Lmy/list?page=${page}`);
    console.log(list.data.data);
    return list.data.data;
  };
  return (
    <div>
      <div
        style={{
          width: "100%",
          height: "100%",
          background: "rgb(242,246,253)",
        }}
      >
        <ul className="list-one">
          {newData.map((item, index) => {
            return (
              <li
                key={index}
                onClick={() => {
                  navigate(`/show?id=${item._id}`);
                }}
              >
                <img
                  src={item.image}
                  alt=""
                  style={{ width: "180px", height: "150px" }}
                />
                <p style={{ fontSize: "1.0625rem" }}>{item.name}</p>

                <p
                  style={{
                    fontSize: "0.8125rem",
                    color: "gray",
                    whiteSpace: "nowrap",
                    textOverflow: "ellipsis",
                    overflow: "hidden",
                  }}
                >
                  {item.context}
                </p>
                <p
                  style={{
                    width: "100%",
                    display: "flex",
                    justifyContent: "space-between",
                  }}
                >
                  <span>
                    <span>￥</span>
                    <span style={{ color: "red", fontSize: "23px" }}>
                      {item.price}.00
                    </span>
                  </span>
                  <span style={{ marginTop: "0.3125rem" }}>{item.perpa}</span>
                </p>
              </li>
            );
          })}
        </ul>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
      <div
        className={`back-to-top ${isVisible ? "visible" : ""}`}
        onClick={scrollToTop}
      >
        <button>↑</button>
      </div>
    </div>
  );
}
